import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select;

const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setIsDisabled] = useState(false)

    // 是在UserList里面的传过来的值来判断，依赖项和UserList中引入的UserFrom是相关联的；所以UserList传过来的值就可以改变依赖项来触发useEffect
    useEffect(() => {
        setIsDisabled(props.isUpdateDisable)
    }, [props.isUpdateDisable])


    const { roleId, region } = JSON.parse(localStorage.getItem("token"))
    const roleObj = {
        "1": "superadmin",
        "2": "admin",
        "3": "editor"
    }

    // 判断每个用户只能操作自己对应的功能模块
    const checkRegionDisabled = (Item) => {
        if (props.isUpdate) {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return true
            }
        } else {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return Item.value !== region
            }
        }
    }

    const checkRoleDisabled = (Item) => {
        if (props.isUpdate) {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return true
            }
        } else {
            if (roleObj[roleId] === "superadmin") {
                return false
            } else {
                return roleObj[Item.Id] !== "editor"
            }
        }
    }

    return (
        <Form ref={ref} layout="vertical">
            {/* From表单拿到Ref引入就可以去调用一个 setFieldsValue方法*/}
            <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入你的用户名喔-_- -_-' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入你的密码喔-_- -_-' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                disabled={false}
                rules={isDisabled ? [] : [{ required: true, message: '请选择你要的内容喔-_- -_-' }]}>
                <Select disabled={isDisabled}>
                    {
                        props.regionList.map(Item =>
                            <Option value={Item.value} key={Item.id} disabled={checkRegionDisabled(Item)}>{Item.title}</Option>
                        )
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                disabled={false}
                rules={[{ required: true, message: '请选择你要的内容喔-_- -_-' }]}>
                <Select onChange={(value) => {
                    // console.log(value);
                    if (value === 1) {
                        setIsDisabled(true)
                        // setFieldsValue就是ref绑定表单实例上的方法，可动态设定表单中的值
                        ref.current.setFieldsValue({
                            region: ""
                        })
                    } else {
                        setIsDisabled(false)
                    }
                }}>
                    {
                        props.roleList.map(Item =>
                            <Option value={Item.id} key={Item.id} disabled={checkRoleDisabled(Item)}>{Item.roleName}</Option>
                        )
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})
export default UserForm
